Skip to main content

Styling in Catalyst

Catalyst offers a variety of methods for styling your application, each with its own advantages:

Global css​

Global styles can be imported into any layout, page, or component.

This approach is straightforward and familiar to those with experience in traditional CSS. However, it may result in larger CSS bundles and challenges in managing styles as the application scales.

  • Place all your global css in /src/static/css/base .
  • Placing css in /src/static/css/base would prevent it from being modularized as css-module is enabled by default in Catalyst.
  • Import these global css file in client/styles.js so that it can be available globally.
Home/Home.js
const Home = () => {
    return <section className="marginTop-4">Home</section>
}
src/static/css/base/layout.css
.marginTop-4 {
    margin-top: 4px;
}
client/styles.js
import "src/static/css/base/layout.css"

All the css written in src/static/css/base/layout.css will be available globally.

CSS-module​

Catalyst enables support for css-module out-of-the-box. CSS-modules locally scope CSS by creating unique names. This allows you to use same classnames in different files without worrying about naming conflicts.

CSS Modules can be utilized in any file within the app directory.

Home/Home.js
import css from "./styles.css"

const Home = () => {
    return <section className={css.layout}>Home</section>
}
Home/styles.css
.layout{
    max-height: 100vh;
}

Sass​

As a widely-used CSS preprocessor, Sass augments CSS with capabilities such as variables, nested rules, and mixins.

Catalyst includes out-of-the-box support for Sass. Utilize Sass in Catalyst with the .scss file extension.

Using global variables in .scss files:​

Place all mixins, variables, and other Sass resources in /src/static/css/resources. These will be automatically imported into your .scss files, allowing you to use these resources without manual imports.

src/static/css/resources/variables.scss
$container-background: #fff;
Home/Home.scss

.background {
    background-color:$container-background;
}

Resources located in /src/static/css/resources are automatically available in .scss files, courtesy of Catalyst’s default configuration.

Note:​

You can seamlessly integrate any style library that doesn't require a build setup, simplifying the process of enhancing your project's visual presentation. For example, Material UI or Tailwind, among others.